<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true" ref="form" :model="formData" label-width="80px">
        <el-form-item label="活动时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="formData.date1" style="width: 150px;"></el-date-picker>
            至
            <el-date-picker placeholder="选择时间" v-model="formData.date2" style="width: 150px;"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <div style="border: 1px solid #ddd;border-radius: 2px;width: 100%;height: 500px;" >
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        label="序号"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="名称"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.companyName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="区域"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.companyProvince }}{{ scope.row.scompany.companyCity }}{{ scope.row.scompany.companyArea }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="主要经营"
                        width="150"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.scompany.businessScope }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <span style="color:white;margin-left: 10px" :style="scope.row.tparStatus=='已申请'?'background-color:#E6A23C':scope.row.tparStatus=='已拒绝'?'background-color:#F56C6C':'background-color:#67C23A'">{{scope.row.tparStatus}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="申请时间"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" >{{scope.row.tparTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="申请成为"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" >{{scope.row.tParRel=='0'?'客户':'供应商'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="备注"
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" >{{scope.row.taprDesc}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="203"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="toClienteleCoopsee(scope.row)">管理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="loadPage"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>

</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                formData:{
                    date1:'',
                    date2:''
                },
                tableData:[],
                loading:true,
                total: 0,//总页数
                currentPage: 1,//当前页数
                pageSize: 5,//每页条数
            }
        },
        methods:{
            toClienteleCoopsee(row){
                localStorage.setItem("companyId",row.tParComB);
                location.href='/clientele-coopsee.html';
            },
            //转换时间
            toDealTime(dealTime){
                if (dealTime!=null && dealTime!=''){
                    let y = dealTime.getFullYear();
                    let m = dealTime.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    let d = dealTime.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    let h = dealTime.getHours();
                    h=h < 10 ? ('0' + h) : h;
                    let minute = dealTime.getMinutes();
                    minute = minute < 10 ? ('0' + minute) : minute;
                    let second=dealTime.getSeconds();
                    second=second < 10 ? ('0' + second) : second;
                    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
                }else {
                    return null;
                }
            },
            onSubmit(){
                this.loadPage(this.currentPage,this.pageSize);
            },
            //更换每页行数
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadPage(this.currentPage,val);
            },
            loadPage(current,page){
                let _this = this;
                this.loading=true;
                if (page==undefined){
                    page=this.pageSize;
                }
                this.currentPage = current;
                axios.get("/TPars/"+this.toDealTime(this.formData.date1)+"/"+this.toDealTime(this.formData.date2)+"/"+current+"/"+page).then(value => {
                    if (value.data.state==1){
                        this.tableData=value.data.data.records;
                        this.total=value.data.data.total;
                        this.currentPage=value.data.data.current;
                        this.pageSize=value.data.data.size;
                        this.loading=false;
                    }
                })
            }
        },
        mounted(){
            this.loadPage(1,5);
        }
    })
</script>
</body>
</html>